<template>
  <div>

    <div class="container">
      <el-form class="form" ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules">
        <h1 class="title">登录</h1>
        <el-form-item prop="username">
          <el-input name="name" placeholder="真实姓名" type="text" v-model="ruleForm.username" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input name="password" placeholder="用户密码" type="password" v-model="ruleForm.password" />
        </el-form-item>
        <el-button class="btn-login" @click="loginbtn()">登录</el-button>
        <br />
        <router-link to="/register">
          <el-button class="btn-gin">注册帐号</el-button>
        </router-link>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { loginApi } from "@/request/user";
import { menuStore } from "@/store/modules/menu";
const menulist = menuStore();
let { city_id, menu, city_select_list,login_user } = storeToRefs(menulist);
let router = useRouter();
const ruleForm = reactive({
  username: "",
  password: ""
});
import type { FormInstance, FormRules } from 'element-plus'
const ruleFormRef = ref<FormInstance>()
const validateusername = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error('请输入用户名字'))
  } else {
    callback()
  }
}
const validatepassword = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error('请输入密码'))
  } else {
    callback()
  }
}
const rules = reactive<FormRules<typeof ruleForm>>({
    username: [{ validator: validateusername, trigger: 'blur' }],
    password: [{ validator: validatepassword, trigger: 'blur' }],
})

const loginbtn = async () => {
  // if (!ruleForm.username || !ruleForm.password) {
    // console.log("sdad");
    await ruleFormRef.value
    .validate()
    .then(() => {
      // console.log(ruleFormRef);
      // console.log(ruleForm);
      // router.push('/home')
      // console.log("sda");
      loginApi({
        username: ruleForm.username,
        password: ruleForm.password,
      }).then((res) => {
        // console.log(res);
        let {message,success} = res;
        if (success==0) {
          ElMessage({
            showClose: true,
            message: '登录成功',
            type: 'success',
          });
          menulist.login_user = ruleForm.username
          router.push('/home')
        }else{
          ElMessage({
           showClose: true,
           message: message,
           type: 'error',
         });
        }
      });
    })
    .catch(() => {
      console.log("校验不同通过");
    });
    // ElMessage({
    //   showClose: true,
    //   message: "用户输入文本框不能为空",
    //   type: "warning"
    // });
  // } else {
  //   console.log(ruleForm);
  // }
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  height: 100vh;
  /* 弹性布局 居中显示 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 渐变背景 */
  /* background: linear-gradient(to top left, #ffe29f, #ffa99f, #ff719a); */
  /* 溢出隐藏 */
  overflow: hidden;
}
.container {
  text-align: center;
  color: #000000;
  padding-top: 180px;
  margin: 0 auto;
  width: 100%;
  height: 100vh;
  background-image: url(../../assets/img/back.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  // background-color: #1f4f80 !important;
}

.container .title {
  font-size: 50px;
  font-weight: 100;
  letter-spacing: 20px;
  margin-bottom: 15px;
  /* font-family: "楷体"; */
  /* 过渡效果 */
  transition: 1s ease-in-out;
}
.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  // opacity: 1;
  /* 不透明度改变时的过渡效果 */
  // transition: opacity 0.5s;
  // color: #fff;
}
.el-input {
  width: 250px;
  height: 40px;
  transition: 0.25s;
  text-align: center;
  outline: none;
  color: #000000;
  font-size: 17px;
  // margin-bottom: 20px;
  // line-height: 90px;
}
:deep(.el-form-item__content) {
  // line-height: 90px;
  // color: #000;
  margin-bottom: 20px;
}
.form .el-input__wrapper {
  outline: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
  // background-color: rgba(255, 255, 255, 0.2);
  // width: 350px;
  padding: 10px 15px;
  border-radius: 3px;
  margin: 0 auto 10px auto;
  text-align: center;
  // color: #fff;
  font-size: 15px;
  transition: 0.25s;
}

:deep(.el-input__wrapper) {
  // background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.form .el-input__inner::placeholder {
  color: #000000;
  font-size: 14px;
  font-weight: 300;
}
:deep(.el-input__inner) {
  text-align: center;
  color: #000000;
}
// :deep(.form .el-input:hover) {
//   background-color: #fff;
// }
:deep(.el-input__inner:focus) {
  // background-color: #fff;
  // border: 1px solid rgba(255, 255, 255, 0.4);
  // width: 400px !important;
  // color: #00ff0d;
}
.btn-login {
  outline: none;
  background-color: #fff;

  border: none;
  width: 250px;
  height: 40px;
  padding: 10px 15px;
  border-radius: 3px;
  font-size: 15px;
  cursor: pointer;
  transition: 0.25s;
}
.btn-login:hover {
  background-color: #f5f7f9;
}
.btn-gin {
  outline: none;
  background-color: #fff;

  border: none;
  width: 250px;
  height: 40px;
  padding: 10px 15px;
  border-radius: 3px;
  font-size: 15px;
  cursor: pointer;
  transition: 0.25s;
}
.btn-gin:hover {
  background-color: #f5f7f9;
}
/* 背景方块*/
.bg-squares {
  list-style: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(to top left, #ffe29f, #ffa99f, #ff719a);
  overflow: hidden;
}
.bg-squares li {
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.15);
  position: absolute;
  bottom: -160px;
  /* 执行动画：动画名 时长 线性 无限次播放*/
  animation: squres 2s linear infinite;
}
/* 为每一个方块设置不同的位置、大小、动画延迟时间、动画时长、背景色  */
.bg-squares li:nth-child(1) {
  left: 10%;
}
.bg-squares li:nth-child(2) {
  left: 20%;
  width: 80px;
  height: 80px;
  /* 动画延迟时间 */
  animation-delay: 2s;
  /* 动画时长 */
  animation-duration: 17s;
}
.bg-squares li:nth-child(3) {
  left: 25%;
  animation-delay: 4s;
}
.bg-squares li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.25);
  animation-duration: 22s;
}
.bg-squares li:nth-child(5) {
  left: 70%;
}
.bg-squares li:nth-child(6) {
  left: 80%;
  width: 120px;
  height: 120px;
  background-color: rgba(255, 255, 255, 0.2);
  animation-delay: 3s;
}
.bg-squares li:nth-child(7) {
  left: 32%;
  width: 160px;
  height: 160px;
  animation-delay: 7s;
}
.bg-squares li:nth-child(8) {
  left: 55%;
  width: 20px;
  height: 20px;
  animation-delay: 15s;
  animation-duration: 40s;
}
.bg-squares li:nth-child(9) {
  left: 25%;
  width: 10px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.3);
  animation-delay: 2s;
  animation-duration: 40s;
}
.bg-squares li:nth-child(10) {
  left: 90%;
  width: 160px;
  height: 160px;
  animation-delay: 11s;
}
.container.success h1 {
  transform: translateY(75px);
}
.container.success .form {
  opacity: 0;
}

.form{
  height: 400px;
  // height: 600px;
  border: 1px solid rgb(0, 204, 255);
  background-color: rgba(49, 41, 41, 0.2);
  width: 40%;
  margin:  0 auto;
  padding-top: 20px;
}

</style>